<template>
	<view>
		<topbar :backgroundColor="backgroundColor" :navButtonColor="navButtonColor"></topbar>
		
		<uni-grid :column="2" :showBorder="false" :square="false">
			<connectioncard v-for="(item, index) in connectionInfos" :key="index" :name="item.name" :ip="item.ip"
				:port="item.port" :imageUrl="item.cover"></connectioncard>
		</uni-grid>
	</view>
</template>

<script>
	import {
		allConnectionForIndex
	} from '@/api/database/index.js'
	export default {
		name: "allconnection",
		data() {
			return {
				connectionInfos: [],
				backgroundColor: '',
				navButtonColor: '',
				page: 1,
				pageSize: 10
			}
		},
		onReady() {
			this.backgroundColor = uni.getStorageSync('backgroundColor')
			this.navButtonColor = uni.getStorageSync('navButtonColor')
		},
		onShow() {
			this.doAllConnectionForIndex()
		},
		onPullDownRefresh() {
			this.doAllConnectionForIndex()
			uni.stopPullDownRefresh()
		},
		methods: {
			doAllConnectionForIndex() {
				allConnectionForIndex({
					page: this.page,
					pageSize: this.pageSize
				}).then((res) => {
					if (res == null) {
						return
					}
					
					this.connectionInfos = [...this.connectionInfos, ...res.data]
					this.page = this.page + 1
				})
			},
		}
	}
</script>

<style scoped>

</style>
